<template>
  <div>
    <button @click="click">下载 JSON 文件</button>
  </div>
</template>

<script setup>
// 如果使用 TypeScript，可以修改为 <script setup lang="ts">
import { saveAs } from "file-saver";
import enJson from "../../locales/en-US/index.ts";
import { ref, reactive, onMounted, computed, nextTick } from "vue";
// console.log("enJson:", enJson);

const downloadJson = (jsonData) => {
  // 将 JSON 数据转换为字符串
  const jsonString = JSON.stringify(jsonData, null, 2); // 格式化为可读的 JSON
  // 创建 Blob 对象
  const blob = new Blob([jsonString], {
    type: "application/json;charset=utf-8;",
  });
  // 使用 file-saver 保存文件
  saveAs(blob, "英文(ALL).json");
};

let json = [];
onMounted(() => {
  setTimeout(() => {
    const file_keys = Object.keys(enJson);

    console.log("file_keys:", file_keys);

    file_keys.forEach((key) => {
      // && key == "activity"
      if (enJson[key]) {
        const key_keys = Object.keys(enJson[key]);
        // console.log("key_keys:", key_keys);

        key_keys.forEach((key_e) => {
          if (typeof enJson[key][key_e] == "string") {
            json.push({
              id: `${key}-${key_e}`,
              英文: enJson[key][key_e],
            });
          } else if (typeof enJson[key][key_e] == "object") {
            const key_obj = enJson[key][key_e];
            const key_obj_keys = Object.keys(key_obj);
            key_obj_keys.forEach((e) => {
              json.push({
                id: `${key}-${key_e}-${e}`,
                英文: key_obj[e],
              });
            });
          }
        });
      }
    });
    // 保存
  }, 1000);
});

const click = () => {
  downloadJson(json);
};
</script>

<style scoped>
/* 可选的样式 */
button {
  padding: 10px 20px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #66b1ff;
}
</style>
